<template>
  <view class="bubble-box" :style="{top: top}">
    <view class="triangle"></view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  props:['top']
};
</script>

<style lang="scss" scoped>
.bubble-box {
  position: fixed;
  z-index: 1000;
  top: calc(var(--status-bar-height) + 78rpx);
  right: 30rpx;
  background: #0d1a18;
  border-radius: 18rpx;
}
.triangle {
  position: absolute;
  top: -8rpx;
  right: 18rpx;
  width: 8rpx;
  height: 8rpx;
  background-color: #0d1918;
  border-top-right-radius: 30%;
  transform: rotate(-45deg);
}

/* 在首部和尾部添加两个绝对定位的图形覆盖部分上面图形设置剩下两个圆角 */
.triangle:before,
.triangle:after {
  content: "";
  width: 8rpx;
  height: 8rpx;
  background-color: #0d1918;
  position: absolute;
  border-top-right-radius: 30%;
}
/* 设置旋转、缩放、倾斜和平移让两个伪元素边缘与上面图形边缘重合 */
.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.45, 0.7) translate(0, -50%);
}
.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.7, 1.45) translate(50%, 0);
}
</style>